<template>
  <div class="box"></div>
</template>

<script setup>
// type
import { computed } from "vue";
import { mapColor, blockColor, blockSize } from "./../game/config";
const props = defineProps(["type"]);

const mapToColor = {
  [0]: mapColor,
  [1]: blockColor,
  [-1]: blockColor,
};

const bgColor = computed(() => mapToColor[props.type]);
const bSize = computed(() => `${blockSize}px`);
</script>

<style scoped>
.box {
  width: v-bind(bSize);
  height: v-bind(bSize);
  margin: 0 1px 1px 0;
  border-radius: 2px;
  transition: all 0.1s;
  background: v-bind(bgColor);
  text-align: center;
}
</style>
